<template>
  <div>
    <ue-el-date-picker v-model="value1" :picker-options="pickerOptions1"></ue-el-date-picker>
    <span v-html="discountText"></span>
    <div></div>
    <ue-el-date-picker v-model="value2" :picker-options="pickerOptions2"></ue-el-date-picker>
    <el-button @click="click">设置折扣</el-button>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        value1: null,
        value2: null,
        pickerOptions1: {
          discount: {
            1495468800000: '<span style="display: block;color: red;font-size: 9px;">7折</span>'
          }
        },
        pickerOptions2: {
          discount: {}
        }
      };
    },
    methods: {
      click () {
        this.pickerOptions2.discount[new Date(2017, 5, 23).getTime()] = '<span style="display: block;color: red;font-size: 9px;">9折</span>';
        this.pickerOptions2.discount[new Date(2017, 5, 24).getTime()] = '<span style="display: block;color: red;font-size: 9px;">8折</span>';
        this.pickerOptions2.discount[new Date(2017, 5, 25).getTime()] = '<span style="display: block;color: red;font-size: 9px;">7折</span>';
        this.pickerOptions2.discount[new Date(2017, 5, 26).getTime()] = '<span style="display: block;color: red;font-size: 9px;">6折</span>';
      }
    },
    computed: {
      discountText: function () {
        if (this.value1) {
          return this.pickerOptions1.discount[this.value1.getTime()];
        } else {
          return '';
        }
      }
    }
  };
</script>
